<template>
  <!-- <div class="create-view">
    <el-steps
      :active="activeIndex"
      finish-status="success"
      simple
      style="margin-top: 20px"
    >
      <el-step title="步骤1"></el-step>
      <el-step title="步骤2"></el-step>
      <el-step title="步骤3"></el-step>
    </el-steps>
    <keep-alive
      :include="['CreateBaseView', 'CreateDescView', 'CreateImageView']"
    >
      <component
        :is="componentName[activeIndex - 1]"
        v-bind.sync="body"
      ></component>
    </keep-alive>

    <div class="flex justify-between w-fulls">
      <div>
        <el-button
          v-if="activeIndex !== 1"
          @click="activeIndex = activeIndex - 1"
          >上一步</el-button
        >
        <el-button
          v-if="activeIndex !== 3"
          @click="activeIndex = activeIndex + 1"
          >下一步</el-button
        >
      </div>
      <div>
        <el-button type="primary">取消</el-button>
        <el-button type="primary" @click="onSave">确定</el-button>
      </div>
    </div>
  </div> -->
  <SetpCom :category-tree="categoryTree"> </SetpCom>
</template>

<script>
import { category } from "@/api";
import SetpCom from "@/components/SetpCom";
// import { mapActions } from "vuex";
// import CreateBaseView from "./CreateBaseView.vue";
// import CreateDescView from "./CreateDescView.vue";
// import CreateImageView from "./CreateImageView.vue";
export default {
  name: "ProductCreateView",
  data() {
    return {
      categoryTree: [],
    };
  },
  components: { SetpCom },
  async created() {
    const res = await category();
    this.categoryTree = res.data.results;
  },
  // data() {
  //   return {
  //     body: {
  //       // category: -1,
  //       name: "",
  //       price: 1,
  //       sale_price: 1,
  //       parent: null,
  //       display_image: "",
  //       short_desc: "",
  //       is_published: true,
  //       // image: 0,
  //     },
  //     activeIndex: 1,
  //     // componentName: ["CreateBaseView", "CreateDescView", "CreateImageView"],
  //     components: { SetpCom },
  //   };
  // },
  // methods: {
  //   ...mapActions("createproduct", ["createProduct"]),
  //   async onSave() {
  //     let data = await this.createProduct(this.body);

  //     //创建商品
  //     console.log(data);
  //     this.body = {
  //       name: "",
  //       price: 1,
  //       sale_price: 1,
  //       parent: null,
  //       display_image: "",
  //       short_desc: "",
  //     };
  //     // this.$router.go(0);
  //   },
  // },
  // created() {
  //   this.createProduct();
  // },
  // components: {
  //   CreateBaseView,
  //   CreateDescView,
  //   CreateImageView,
  // },
};
</script>
